import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { WorldMap } from '@/components/map/world-map';
import { Block, DL, Empty, Head, Row } from '@/components/satellite/primitives';
import { OrbitBadge, StatusBadge, TypeBadge } from '@/components/ui/badges';
import { Container, Stat } from '@/components/ui/section';
import { api, ApiError } from '@/lib/api';
import { fmtDate, fmtDateTime, fmtDeg, fmtInt, num, titleCase } from '@/lib/format';
import { EVENT_TYPE_LABELS, OBJECT_TYPE_LABELS, routes, SITE_URL } from '@/lib/site';
import type { LaunchDetail } from '@/lib/types';

type Params = { params: Promise<{ cospar: string }> };
const TYPE_ORDER = ['PAYLOAD', 'STATION', 'CREWED', 'ROCKET_BODY', 'DEBRIS', 'UNKNOWN'];

async function load(cospar: string): Promise<LaunchDetail> {
  try {
    return (await api.launch(cospar)).data;
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}

function describe(l: LaunchDetail): string {
  return `Launch ${l.cospar_launch_id}${l.primary_name ? ` (${l.primary_name})` : ''} on ${fmtDate(l.launch_date)}${l.site_name ? ` from ${l.site_name}` : ''}: ${fmtInt(l.payload_count)} payloads, ${fmtInt(l.object_count)} catalogued objects, ${fmtInt(l.on_orbit_count)} still on orbit. Every object with its status, orbit and owner on SatelliteIndex.`;
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { cospar } = await params;
  let l: LaunchDetail;
  try {
    l = (await api.launch(cospar)).data;
  } catch {
    return { title: 'Launch', robots: { index: false } };
  }
  const title = `${l.primary_name ?? 'Launch'} — Launch ${l.cospar_launch_id}, ${fmtDate(l.launch_date)}`;
  const description = describe(l);
  const canonical = routes.launch(l.cospar_launch_id);
  return { title, description, alternates: { canonical }, openGraph: { title, description, url: `${SITE_URL}${canonical}`, type: 'article' }, twitter: { card: 'summary', title, description } };
}

function OwnerChips({ owners }: { owners: LaunchDetail['owners'] }) {
  return (
    <ul className="flex flex-wrap gap-1.5">
      {owners.map((o) => (
        <li key={o.code}>
          <Link href={routes.launches(`owner=${encodeURIComponent(o.code)}`)} className="inline-flex min-h-9 items-center gap-1.5 rounded-md border border-rule px-2.5 py-1 text-xs text-ink-2 hover:border-rule-strong hover:text-ink" title={`${o.kind} · all launches with owner ${o.code}`}>
            <span className="mono text-ink">{o.code}</span> {o.name}
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default async function LaunchPage({ params }: Params) {
  const { cospar } = await params;
  const l = await load(cospar);
  const objects = num(l.object_count) ?? l.objects.length;
  const onOrbit = num(l.on_orbit_count) ?? 0;
  const groups = TYPE_ORDER.map((t) => ({ type: t, rows: l.objects.filter((o) => o.object_type === t) })).filter((g) => g.rows.length);
  const hasSite = l.site_lat != null && l.site_lon != null;
  const jsonLd = { '@context': 'https://schema.org', '@type': 'Event', name: `Launch ${l.cospar_launch_id}${l.primary_name ? ` — ${l.primary_name}` : ''}`, startDate: l.launch_date, url: `${SITE_URL}${routes.launch(l.cospar_launch_id)}`, description: describe(l), location: l.site_name ? { '@type': 'Place', name: l.site_name, ...(hasSite ? { geo: { '@type': 'GeoCoordinates', latitude: l.site_lat, longitude: l.site_lon } } : {}) } : undefined, identifier: { '@type': 'PropertyValue', propertyID: 'COSPAR launch id', value: l.cospar_launch_id } };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <header className="pb-6 pt-6 md:pt-10">
        <p className="eyebrow mono">Launch · COSPAR {l.cospar_launch_id} · {fmtDate(l.launch_date)}</p>
        <h1 className="display mt-2 break-words text-3xl md:text-5xl">{l.primary_name ?? `Launch ${l.cospar_launch_id}`}</h1>
        <p className="mt-3 text-sm text-ink-2">
          {l.site_slug ? <Link href={routes.launchSite(l.site_slug)} className="link">{l.site_name}</Link> : l.site_name ?? 'Launch site unknown'}
          {l.site_country && <> · <Link href={routes.country(l.site_country)} className="link mono">{l.site_country}</Link></>}
          {hasSite && <span className="mono ml-2 text-xs text-ink-3">{l.site_lat!.toFixed(2)}°, {l.site_lon!.toFixed(2)}°</span>}
        </p>
      </header>

      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-start">
        <div className="grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-4">
          <Stat label="Payloads" value={fmtInt(l.payload_count)} />
          <Stat label="Catalogued objects" value={fmtInt(objects)} hint="payloads + rocket bodies + debris" />
          <Stat label="Still on orbit" value={fmtInt(onOrbit)} accent={onOrbit > 0} />
          <Stat label="Decayed" value={fmtInt(objects - onOrbit)} hint={objects ? `${((1 - onOrbit / objects) * 100).toFixed(0)}% of objects` : undefined} />
          <div className="col-span-2 sm:col-span-4">
            <p className="eyebrow mb-2">Owners (SATCAT owner codes)</p>
            {l.owners.length ? (
              <>
                <OwnerChips owners={l.owners.slice(0, 12)} />
                {l.owners.length > 12 && (
                  <details className="mt-2">
                    <summary className="inline-flex min-h-9 cursor-pointer items-center text-xs text-accent hover:underline">Show {fmtInt(l.owners.length - 12)} more owners</summary>
                    <div className="mt-2"><OwnerChips owners={l.owners.slice(12)} /></div>
                  </details>
                )}
              </>
            ) : (
              <Empty>No owner codes recorded for the objects of this launch.</Empty>
            )}
          </div>
        </div>
        <div className="overflow-hidden rounded-lg border border-rule">
          {hasSite ? (
            <WorldMap markers={[{ lat: l.site_lat!, lon: l.site_lon!, color: 'var(--accent)', size: 6, pulse: true, label: l.site_name ?? undefined, href: l.site_slug ? routes.launchSite(l.site_slug) : undefined }]} title={`Launch site: ${l.site_name ?? 'unknown'}`} />
          ) : (
            <p className="p-6 text-center text-sm text-ink-3">Launch site coordinates unavailable</p>
          )}
        </div>
      </div>

      <div className="mt-6 divide-y divide-[color:var(--rule)]">
        <Block id="objects">
          <Head eyebrow="Catalogue" title={<>Objects from this launch <span className="tnum text-ink-3">· {fmtInt(l.objects.length)}{objects > l.objects.length ? ` of ${fmtInt(objects)}` : ''}</span></>} action={{ href: routes.satellites(`launch=${encodeURIComponent(l.cospar_launch_id)}`), label: 'Open in explorer' }} />
          {groups.length === 0 && <Empty>No catalogued object is linked to this launch.</Empty>}
          {groups.map((g) => {
            const collapsed = g.rows.length > 40;
            const table = (
              <div className="overflow-x-auto scrollbar-thin">
                <table className="data-table stack">
                  <thead>
                    <tr><th>Name</th><th>NORAD</th><th>COSPAR</th><th>Status</th><th>Orbit</th><th className="num">Perigee / apogee</th><th className="num">Incl.</th><th>Decayed</th><th>Operator</th></tr>
                  </thead>
                  <tbody>
                    {g.rows.map((o) => (
                      <tr key={o.id}>
                        <td data-label="Name" className="primary"><Link href={routes.satellite(o.slug)} className="link font-medium">{o.name}</Link>{o.constellation_slug && <Link href={routes.constellation(o.constellation_slug)} className="ml-2 text-2xs text-ink-3 hover:text-accent">{o.constellation_name}</Link>}</td>
                        <td data-label="NORAD" className="mono text-xs">{o.norad_id ?? '—'}</td>
                        <td data-label="COSPAR" className="mono text-xs">{o.cospar_id ?? '—'}</td>
                        <td data-label="Status"><StatusBadge status={o.status} /></td>
                        <td data-label="Orbit"><OrbitBadge orbitClass={o.orbit_class} /></td>
                        <td data-label="Perigee / apogee" className="num mono text-xs">{o.perigee_km !== null ? `${fmtInt(o.perigee_km)} / ${fmtInt(o.apogee_km)} km` : '—'}</td>
                        <td data-label="Inclination" className="num mono text-xs">{fmtDeg(o.inclination_deg)}</td>
                        <td data-label="Decayed" className="mono text-xs">{o.decay_date ? fmtDate(o.decay_date) : <span className="text-ink-3">on orbit</span>}</td>
                        <td data-label="Operator" className="text-xs">{o.operator_slug ? <Link href={routes.operator(o.operator_slug)} className="link">{o.operator_name}</Link> : o.operator_name ?? '—'}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            );
            const heading = <span className="inline-flex items-center gap-2 text-sm font-semibold text-ink-2"><TypeBadge type={g.type} /> {OBJECT_TYPE_LABELS[g.type] ?? g.type} <span className="tnum text-ink-3">· {fmtInt(g.rows.length)}</span></span>;
            return collapsed ? (
              <details key={g.type} className="mt-6 first:mt-0">
                <summary className="flex min-h-11 cursor-pointer list-none items-center justify-between gap-3 rounded-md border border-rule px-3 hover:bg-plane-2">
                  {heading}
                  <span className="text-xs text-ink-3">show all</span>
                </summary>
                <div className="mt-2">{table}</div>
              </details>
            ) : (
              <div key={g.type} className="mt-6 first:mt-0">
                <p className="mb-2">{heading}</p>
                {table}
              </div>
            );
          })}
        </Block>

        <Block id="details">
          <Head eyebrow="Record" title="Launch record" />
          <DL>
            <Row label="COSPAR launch id" value={l.cospar_launch_id} />
            <Row label="Launch date" value={fmtDate(l.launch_date)} hint="(SATCAT, UTC)" />
            <Row label="Launch site" mono={false} value={l.site_slug ? <Link href={routes.launchSite(l.site_slug)} className="link">{l.site_name}</Link> : l.site_name ?? '—'} />
            <Row label="Site code" value={l.site_code ?? '—'} />
            <Row label="SatelliteIndex id" value={<span className="break-all text-xs">{l.id}</span>} />
          </DL>
        </Block>

        <Block id="events">
          <Head eyebrow="Timeline" title="Events" />
          {l.events.length ? (
            <ol className="divide-y divide-[color:var(--rule)]">
              {l.events.map((e) => (
                <li key={e.id} className="grid gap-1 py-3 sm:grid-cols-[150px_minmax(0,1fr)]">
                  <p className="mono text-xs text-ink-3">{fmtDateTime(e.event_time)}</p>
                  <div><span className="mr-2 rounded bg-plane-2 px-1.5 py-px text-[10px] uppercase tracking-wider text-ink-3">{EVENT_TYPE_LABELS[e.type] ?? titleCase(e.type)}</span><span className="text-sm">{e.title}</span>{e.summary && <p className="mt-1 text-xs text-ink-2">{e.summary}</p>}</div>
                </li>
              ))}
            </ol>
          ) : (
            <Empty>No events recorded for this launch or its objects.</Empty>
          )}
        </Block>
      </div>

      <p className="pb-10 pt-4 text-2xs text-ink-3">
        This launch is derived from catalogued objects sharing the international designator {l.cospar_launch_id}; date and site come from SATCAT. See the <Link href={routes.methodology()} className="hover:text-accent">methodology</Link>.
      </p>
    </Container>
  );
}